<template>
  <div>
    <h1>基本信息</h1>
    <div>姓名:{{person.name }}</div>
    <div>
        点赞数:{{person.likeNum }}
        <!-- <button @click="person.likeNum++">点赞</button> -->
        <button @click="giveLikNum">点赞</button>
    </div>
  </div>
</template>
<!-- 
  reactive的使用步骤
  1、导入reactive函数
  2、调用reactive函数创建响应式数据
  3、在js中操作reactive：reactive对象.属性++
  4、在template模板使用中直接用:reactive对象.属性
-->
<script lang='ts' setup>

 import {reactive} from 'vue'
 interface PersonType{
   name:string
   likeNum:number
 }
 const person=reactive<PersonType>({
    name:'Giles',
    likeNum:0
 })

 const giveLikNum=()=>{
    console.log('person',person);
    
    person.likeNum++  
 }
</script>

<style lang='scss' scoped>
</style>